<template>
  <div class="content">
    <van-row class="search-header">
      <van-col span="18">
        <van-search v-model="condition" shape="round" placeholder="请输入存货名称" @input="onFindGoods()" />
      </van-col>
      <van-col span="6">
        <van-dropdown-menu>
          <van-dropdown-item
            class="drop-content"
            v-model="value1"
            :options="option1"
            @change="onSelectType"
          />
        </van-dropdown-menu>
      </van-col>
      <van-tabs
        @change="onChange"
        v-model="activeName"
        :offset-top="60"
        class="tab-content"
        animated
      >
        <!--   sticky -->
        <van-tab title="全部" name="1"></van-tab>
        <van-tab title="最近60天" name="2"></van-tab>
        <van-tab title="客户所有" name="3"></van-tab>
      </van-tabs>
    </van-row>
    <div class="body-content">
      <goodList ref="goodList" @fatherMethod="postGift" />
    </div>
    <van-goods-action>
      <van-goods-action-icon
        icon="orders-o"
        text="订单"
        :badge="goodColumns.length"
        @click="onCheckOrder"
      />
      <van-goods-action-button type="danger" text="销售加入" @click="onSelectGood()" />
      <van-goods-action-button type="warning" text="赠品加入" @click="onSelectGift()" />
    </van-goods-action>
  </div>
</template>
<script>
import goodList from "@/components/goodList";
import { Toast } from "vant";
import { queryGoods, queryType } from "@/api/order/order";
import { clearArr } from "@/api/public/public";
import eventBus from "@/api/public/eventBus";

export default {
  components: {
    goodList,
  },
  data() {
    return {
      // 下拉框
      value1: "",
      option1: [],
      // 存货数组
      goodColumns: [],
      // 存货
      goodColumns2: [],
      // 存货赠品
      goodColumns3: [],
      // tab页
      activeName: "1",
      // 条件搜索存货
      condition: "",
      // 账套
      DsName: "",
      // 下拉翻页
      page: 1,
      limit: 10,
      count: "", //总数
      loading: false,
      finished: false,
      refreshing: false,
      // 防抖计时器
      timeout:"",
    };
  },
  mounted() {
    // 保存下单页面传过来的存货
    this.getGoodsByOrder();
    // 移动端物理返回键处理
    // 如果支持 popstate 一般移动端都支持了
    if (window.history && window.history.pushState) {
      // 往历史记录里面添加一条新的当前页面的url
      history.pushState(null, null, document.URL);
      // 给 popstate 绑定一个方法 监听页面刷新
      window.addEventListener("popstate", this.backChange, false); //false阻止默认事件
    }
  },
  created() {
    // 从session中获取账套
    this.DsName = this.$session.get("DsName");
    // 查询存货分类
    this.findTypes();
  },
  beforeDestroy() {},
  destroyed() {
    // 移除监听器
    window.removeEventListener("popstate", this.backChange, false); //false阻止默认事件
  },
  methods: {
    // 移动端返回键事件监听
    backChange() {
      const that = this;
      this.onCheckOrder();
      // alert("存货监听返回");
    },
    // 选择存货分类
    onSelectType() {
      let condition = {
        name: this.condition,
        idinventoryclass: this.value1,
        status: this.activeName,
      };
      this.$refs.goodList.condition = condition;
      this.$refs.goodList.goodColumns = [];
      this.$refs.goodList.onRefresh();
    },
    // 查询存货分类
    findTypes() {
      let condition = {
        DsName: this.DsName,
      };
      queryType(condition, (data) => {
        this.option1 = data.data;
        this.option1.reduce((item = [], ele) => {
          ele.text = ele.name;
          ele.value = ele.id;
          item.push(ele);
        }, []);
        let obj = {
          text: "全部分类",
          value: "",
        };
        this.option1.unshift(obj);
      });
    },
    // 保存下单页面传过来的存货
    getGoodsByOrder() {
      let orderData = this.$store.state.orderData.orderData;
      console.log("orderData", orderData);
      let goodColumns = orderData.tempArr;
      // 解决刷新无法保留新选的存货bug
      let goodList = this.$session.get("goodList");
      if (goodList != "") {
        JSON.parse(goodList).map((ele) => {
          goodColumns.push(ele);
        });
      }

      // 存货和赠品分别去重
      let goods = goodColumns.filter((ele) => {
        return ele.gift === 0;
      });
      goods = clearArr(goods);
      let gifts = goodColumns.filter((ele) => {
        return ele.gift === 1;
      });
      gifts = clearArr(gifts);
      this.goodColumns = goods.concat(gifts);
    },
    // /查看订单
    onCheckOrder() {
      this.$router.push({
        path: "/app/index/order",
        query: { checkOrder: true },
      });
    },
    // 传递赠品
    postGift(ele) {
      // ele.invSCost = 0;
      this.goodColumns.push(ele);
      // 去重
      // this.goodColumns=clearArr(this.goodColumns)
      var obj = {};
      this.goodColumns = this.goodColumns.reduce(function (item = [], next) {
        if (next.gift === 1) {
          obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
        } else {
          item.push(next);
        }
        return item;
      }, []);
      Toast("添加赠品成功！");
      // 将选中的值存入session
      this.$session.set("goodList", JSON.stringify(this.goodColumns));
    },
    // 选择赠品
    onSelectGift() {
      let goodColumns = this.$refs.goodList.goodColumns;
      goodColumns = goodColumns.filter((ele) => {
        ele.gift = 1;
        ele.price = 0;
        ele.idinventory = ele.id;
        return ele.checkbox === true;
      });
      if (goodColumns.length === 0) {
        Toast("请选择存货！");
      } else {
        let arrobj = JSON.parse(JSON.stringify(goodColumns));
        arrobj.forEach((ele) => {
          this.goodColumns3.push(ele);
        });

        // 去重
        this.goodColumns3 = clearArr(this.goodColumns3);
        this.goodColumns3.forEach((ele) => {
          this.goodColumns.push(ele);
        });
        // 去重
        // this.goodColumns = clearArr(this.goodColumns);
        var obj = {};
        this.goodColumns = this.goodColumns.reduce(function (item = [], next) {
          if (next.gift === 1) {
            obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
          } else {
            item.push(next);
          }
          return item;
        }, []);
        // this.goodColumns.map((ele) => {
        //   ele.idinventory = ele.id;
        //   return ele;
        // });
        Toast("添加赠品成功！");
        // 将选中的值存入session
        this.$session.set("goodList", JSON.stringify(this.goodColumns));
      }
    },
    // 选择存货
    onSelectGood() {
      let goodColumns = this.$refs.goodList.goodColumns;
      goodColumns = goodColumns.filter((ele) => {
        ele.gift = 0;
        ele.price = ele.invSCost;
        ele.idinventory = ele.id;
        return ele.checkbox === true;
      });
      if (goodColumns.length === 0) {
        Toast("请选择存货！");
      } else {
        let arrobj = JSON.parse(JSON.stringify(goodColumns));
        arrobj.forEach((ele) => {
          this.goodColumns.push(ele);
        });
        // 去重
        var obj = {};
        this.goodColumns = this.goodColumns.reduce(function (item = [], next) {
          if (next.gift === 0) {
            obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
          } else {
            item.push(next);
          }
          return item;
        }, []);
        //   this.goodColumns.map((ele) => {
        //   ele.idinventory = ele.id;
        //   return ele;
        // });
        Toast("添加成功！");

        // 将选中的值存入session
        this.$session.set("goodList", JSON.stringify(this.goodColumns));
      }
    },
    // 搜索框事件
    onFindGoods() {
      this.$refs.goodList.page = 1;
      this.debounce(500);
    },
        //防抖debounce代码：
    debounce(wait) {
      let _this = this;
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        _this.onSelectType();
      }, wait);
    },
    //   头部导航栏事件
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    // tab转换事件
    onChange(name, title) {
      this.$refs.goodList.page = 1;
      this.onSelectType();
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  .search-header {
    height: 60px;
    width: 100%;
    color: white;
    line-height: 60px;
    // background-color: #1989fa;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    // position: absolute;
    // top: 0px;
  }
  .tab-content {
    // margin-top: 60px;
    width: 100%;
    position: fixed;
    top: 47px;
    left: 0px;
    z-index: 1;
  }
  .body-content {
    margin-top: 90px;
    margin-bottom: 60px;
  }
}
</style>